<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术社区</title>

    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .header-logo {
            display: flex;
            align-items: center;
        }
        .header-logo img {
            height: 60px;
        }
        .header-logo h2 {
            margin-left: 10px;
        }
        .header-nav {
            display: flex;
            align-items: center;
        }
        .header-search {
            margin-left: auto;
        }
        .header-user {
            display: flex;
            align-items: center;
        }
        .header-user img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
        }
        .content-section {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .section {
            width: 30%;
            position: relative; 
        }
        .section-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        .card-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .card-item {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .card-item img {
            height: 100px;
            width: 100px;
            margin-bottom: 10px;
        }
        .card-item h3 {
            margin: 0;
            font-size: 16px;
        }
        .card-item p {
            margin: 5px 0;
            color: #909399;
        }
        .view-more {
            position: absolute;
            top: 10px; 
            right: 10px;
        }
        .product-carousel {
            width: 30%;
            position: relative; 
        }
        .product-carousel .view-more {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="4" style="display: flex; flex-direction: row; align-items: center">
                    <img src="./static/images/logo.png" style="height: 60px;">
                    <h2 style="padding-left: 4px;">技术社区</h2>
                </el-col>
                <el-col :span="8">
                    <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important;">
                        <el-menu-item index="1">首页</el-menu-item>
                        <el-menu-item index="2">文章</el-menu-item>
                        <el-menu-item index="3">课程</el-menu-item>
                        <el-menu-item index="4">商城</el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="8" style="height: 60px; line-height: 60px;" class="hidden-xs-only">
                    <el-input placeholder="请输入关键字"></el-input>
                </el-col>
                <el-col :span="4" style="text-align: right; height: 60px; line-height: 60px;" class="hidden-xs-only">
                    <img src="./Static/images/avatar.png" style="height: 50px; width: 40px;">
                </el-col>
            </el-row>
        </el-header>
        
        <el-main>
            <el-carousel height="450px">
                <el-carousel-item>
                    <img src="./static/images/carousel1.png"/>
                </el-carousel-item>
                <el-carousel-item>
                    <img src="./static/images/carousel2.png"/>
                </el-carousel-item>
                <el-carousel-item>
                    <img src="./static/images/carousel3.png"/>
                </el-carousel-item>
            </el-carousel>

            <div class="content-section">
                <div class="section">
                    <div class="section-title">热门文章</div>
                    <div class="card-grid">
                        <div class="card-item" v-for="article in hotArticles" :key="article.id">
                            <h3>{{ article.title }}</h3>
                            <p>{{ article.date }}</p>
                        </div>
                    </div>
                    <div class="view-more">
                        <el-button type="primary" @click="viewMoreArticles">查看更多</el-button>
                    </div>
                </div>
                <div class="section">
                    <div class="section-title">热门课程</div>
                    <div class="card-grid">
                        <div class="card-item" v-for="course in hotCourses" :key="course.id">
                            <h3>{{ course.title }}</h3>
                            <p>{{ course.price }}</p>
                        </div>
                    </div>
                    <div class="view-more">
                        <el-button type="primary" @click="viewMoreCourses">查看更多</el-button>
                    </div>
                </div>
                <div class="product-carousel">
                    <div class="section-title">热门商品</div>
                    <el-carousel height="450px">
                        <el-carousel-item>
                            <img src="./static/images/product01.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="./static/images/product02.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="./static/images/product03.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="./static/images/product04.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="./static/images/product05.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="./static/images/product06.png"/>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="view-more">
                        <el-button type="primary" @click="viewMoreProducts">查看更多</el-button>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer>
            <el-row>
                <el-col :xs="24" :lg="8">
                    <div>
                        <img src="./Static/images/logo.png" style="height: 60px;">
                    </div>
                    <div>
                        <h2>技术社区</h2>
                        <p>致力于构建一个专业的IT技术交流社区</p>
                    </div>
                </el-col>
                <el-col :xs="24" :lg="8">
                    <div>
                        <el-link type="primary">首页</el-link>
                        <el-link type="primary">文章</el-link>
                        <el-link type="primary">课程</el-link>
                        <el-link type="primary">商城</el-link>
                    </div>
                    <div>
                        <el-link type="primary">关于我们</el-link>
                        <el-link type="primary">使用手册</el-link>
                        <el-link type="primary">隐私条款</el-link>
                        <el-link type="primary">建议反馈</el-link>
                    </div>
                </el-col>
                <el-col :xs="24" :lg="8">
                    <div>
                        <h2>联系我们</h2>
                        <p>电话: 123456789</p>
                        <p>邮箱：software@develop.com</p>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: 20px;">
                <p>软件开发工作室版权所有</p>
            </el-row>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    var App = {
        data() {
            return {
                name: "hello vue",
                activeIndex: '1',
                isLoggedIn: false,
                hotArticles: [
                    { id: 1, title: 'Vue3.0新特性使用攻略', date: '2024-10-28' },
                    { id: 2, title: 'Vite脚手架使用详解', date: '2024-10-25' },
                    { id: 3, title: 'ElementPlus框架应用场景', date: '2024-10-12' },
                    { id: 4, title: '5款独立开发者必备神器', date: '2024-10-12' }
                ],
                hotCourses: [
                    { id: 1, title: '零基础学JavaScript', price: '¥99' },
                    { id: 2, title: 'Vue.js从入门到实战', price: '¥199' },
                    { id: 3, title: '深入浅出状态管理', price: '¥299' },
                    { id: 4, title: '说透大厂前端项目场景面试题', price: '¥399' }
                ],
                hotProducts: [
                    { id: 1, image: './static/images/product1.png', title: 'IT书籍' },
                    { id: 2, image: './static/images/product2.png', title: 'IT配件' },
                    { id: 3, image: './static/images/product3.png', title: 'IT软件' }
                ]
            }
        },
        methods: {
            toggleLogin() {
                this.isLoggedIn = !this.isLoggedIn;
            },
            viewMoreArticles() {
                alert("查看更多文章");
            },
            viewMoreCourses() {
                alert("查看更多课程");
            },
            viewMoreProducts() {
                alert("查看更多商品");
            }
        }
    }
    Vue.createApp(App).use(ElementPlus).mount("#app")
</script>
</html>